<!-- 动态排序面板组件 -->
<template>
  <div class="sorting-panel">
    <div class="panel-header">
      <h3 class="panel-title">
        <el-icon><Sort /></el-icon>
        动态排序控制
      </h3>
    </div>
    
    <div class="sorting-content">
      <!-- 权重滑块区域 -->
      <div class="weight-controls">
        <div class="weight-item">
          <div class="weight-label">
            <el-icon><Star /></el-icon>
            <span>相关度权重</span>
            <span class="weight-value">{{ relevanceWeight }}%</span>
          </div>
          <el-slider
            v-model="relevanceWeight"
            :min="0"
            :max="100"
            :step="5"
            show-stops
            @change="handleWeightChange"
            class="weight-slider"
          />
        </div>
        
        <div class="weight-item">
          <div class="weight-label">
            <el-icon><Clock /></el-icon>
            <span>时效性权重</span>
            <span class="weight-value">{{ timelinessWeight }}%</span>
          </div>
          <el-slider
            v-model="timelinessWeight"
            :min="0"
            :max="100"
            :step="5"
            show-stops
            @change="handleWeightChange"
            class="weight-slider"
          />
        </div>
      </div>
      
      <!-- 排序选项 -->
      <div class="sort-options">
        <el-radio-group v-model="sortMode" @change="handleSortChange" class="sort-radio-group">
          <el-radio-button label="综合排序">智能排序</el-radio-button>
          <el-radio-button label="相关度">相关度优先</el-radio-button>
          <el-radio-button label="时间">时间优先</el-radio-button>
          <el-radio-button label="质量">质量优先</el-radio-button>
        </el-radio-group>
      </div>
      
      <!-- 排序统计 -->
      <div class="sort-stats">
        <div class="stat-item">
          <span class="stat-label">当前结果数</span>
          <span class="stat-value">{{ resultCount }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">排序耗时</span>
          <span class="stat-value">{{ sortTime }}ms</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Sort, Star, Clock } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  resultCount: {
    type: Number,
    default: 0
  }
})

// Emits
const emit = defineEmits(['sortChange', 'weightChange'])

// 响应式数据
const relevanceWeight = ref(60)
const timelinessWeight = ref(40)
const sortMode = ref('综合排序')
const sortTime = ref(0)

// 计算属性 - 确保权重总和为100%
const adjustedWeights = computed(() => {
  const total = relevanceWeight.value + timelinessWeight.value
  if (total === 0) return { relevance: 50, timeliness: 50 }
  
  return {
    relevance: Math.round((relevanceWeight.value / total) * 100),
    timeliness: Math.round((timelinessWeight.value / total) * 100)
  }
})

// 权重变化处理
const handleWeightChange = () => {
  const startTime = performance.now()
  
  emit('weightChange', {
    relevance: adjustedWeights.value.relevance,
    timeliness: adjustedWeights.value.timeliness,
    mode: sortMode.value
  })
  
  // 模拟排序时间
  setTimeout(() => {
    sortTime.value = Math.round(performance.now() - startTime)
  }, 100)
}

// 排序模式变化处理
const handleSortChange = (value) => {
  const startTime = performance.now()
  
  emit('sortChange', {
    mode: value,
    weights: adjustedWeights.value
  })
  
  // 模拟排序时间
  setTimeout(() => {
    sortTime.value = Math.round(performance.now() - startTime)
  }, 80)
}

// 监听权重变化，自动调整另一个权重
watch([relevanceWeight, timelinessWeight], ([newRel, newTime], [oldRel, oldTime]) => {
  // 防止无限循环
  if (newRel === oldRel && newTime === oldTime) return
  
  const total = newRel + newTime
  if (total > 100) {
    if (newRel !== oldRel) {
      timelinessWeight.value = 100 - newRel
    } else {
      relevanceWeight.value = 100 - newTime
    }
  }
})
</script>

<style scoped>
.sorting-panel {
  background: #263445; /* 使用与主题一致的深色背景 */
  border-radius: 1vh;
  padding: 2vh;
  border: 1px solid #2d3a4b; /* 深色边框 */
  box-shadow: 0 0.5vh 2vh rgba(0, 0, 0, 0.3);
  height: 100%;
}

.panel-header {
  margin-bottom: 2vh;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 1vh;
  font-size: 1.6vh;
  font-weight: 600;
  color: #e2e8f0;
  margin: 0;
}

.sorting-content {
  display: flex;
  flex-direction: column;
  gap: 2vh;
  height: calc(100% - 4vh);
}

.weight-controls {
  display: flex;
  flex-direction: column;
  gap: 2vh;
}

.weight-item {
  background: #1f2d3d; /* 使用深色背景 */
  padding: 1.5vh;
  border-radius: 0.8vh;
  border: 1px solid #2d3a4b; /* 深色边框 */
}

.weight-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1vh;
  font-size: 1.4vh;
  color: #cbd5e1;
}

.weight-label span {
  display: flex;
  align-items: center;
  gap: 0.5vh;
}

.weight-value {
  font-weight: 600;
  color: #3b82f6;
}

.weight-slider {
  margin-top: 1vh;
}

.weight-slider :deep(.el-slider__runway) {
  background-color: rgba(71, 85, 105, 0.4);
  height: 0.6vh;
}

.weight-slider :deep(.el-slider__bar) {
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.weight-slider :deep(.el-slider__button) {
  border: 2px solid #3b82f6;
  background: #1e293b;
  width: 2vh;
  height: 2vh;
}

.weight-slider :deep(.el-slider__stop) {
  background-color: rgba(71, 85, 105, 0.6);
  width: 0.4vh;
  height: 0.4vh;
}

.sort-options {
  background: #1f2d3d; /* 使用深色背景 */
  padding: 1.5vh;
  border-radius: 0.8vh;
  border: 1px solid #2d3a4b; /* 深色边框 */
}

.sort-radio-group {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1vh;
}

.sort-radio-group :deep(.el-radio-button) {
  flex: 1;
}

.sort-radio-group :deep(.el-radio-button__inner) {
  background: rgba(51, 65, 85, 0.6);
  border-color: rgba(71, 85, 105, 0.4);
  color: #cbd5e1;
  font-size: 1.2vh;
  padding: 1vh 1.5vh;
  border-radius: 0.6vh;
  transition: all 0.3s ease;
}

.sort-radio-group :deep(.el-radio-button__original:checked + .el-radio-button__inner) {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-color: #3b82f6;
  color: #ffffff;
  box-shadow: 0 0.2vh 0.8vh rgba(59, 130, 246, 0.3);
}

.sort-stats {
  background: #1f2d3d; /* 使用深色背景 */
  padding: 1.5vh;
  border-radius: 0.8vh;
  border: 1px solid #2d3a4b; /* 深色边框 */
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5vh;
}

.stat-label {
  font-size: 1.2vh;
  color: #94a3b8;
}

.stat-value {
  font-size: 1.4vh;
  font-weight: 600;
  color: #3b82f6;
}
</style>